<template>
	<view class="container">
		<view class="header">
			<image @tap="toProfilePage" :src="userInfo.headimg || 'https://cdn2.hquesoft.com/box/headimg/unlogin.png'"
				v-if="isLogin" mode="aspectFill" hover-class="hover" class="headimg"></image>
			<image v-else @tap="toLoginPage" :src="'https://cdn2.hquesoft.com/box/headimg/unlogin.png'"
				hover-class="hover" class="headimg"></image>
			<view class="middle">
				<view class="name" v-if="isLogin">{{userInfo.name}}</view>
				<view class="is-login" v-else @tap="toLoginPage">点击登录</view>
				<!-- <text class="id">ID: {{userInfo.uuid}}</text> -->
				<!-- #ifndef MP-ALIPAY -->
				<!-- <template v-if="config.is_show_vip">
					<view class="vip-c" v-if="userInfo.vip_status == 1" @tap="toBuyVip">
						<text class="new-iconfont icon-vip"></text>
						<text>{{$tool.formatDate(userInfo.vip_endAt, 'yyyy-MM-dd')}} 到期</text>
					</view>
					<view class="vip-c disabled" v-else @tap="toBuyVip">
						<text class="new-iconfont icon-vip"></text>
						<text>开通VIP会员</text>
					</view>
				</template> -->
				<!-- #endif -->
			</view>
			<!-- <div style="flex-grow: 1;"></div> -->

			<!-- #ifndef MP-ALIPAY -->
			<!-- 	<button class="right" open-type="contact" v-if="isMiniappAndUseMiniappKf">
				<text class="new-iconfont icon-contact">客服</text>
			</button> -->
			<!-- @tap="openContact" -->
			<button class="right" @click="openContact">
				<text class="new-iconfont icon-contact">客服</text>
			</button>
			<!-- #endif -->

		</view>
		<!-- 明细部分 -->
		<view class="status-bar">
			<view class="item" v-if="isShowShop == 1" @tap="toDetail('/pages/myScore/index')">
				<view class="number">{{userInfo.spar || 0}}</view>
				<!-- <view class="text">{{scoreAlias}}</view> -->
				<view class="text">晶石</view>
			</view>
			<view class="item" @tap="toDetail('/pages/myRedpack/index')">
				<view class="number"><span class="small-font"></span>{{userInfo.zhenbeiCoin || 0}}</view>
				<view class="text">镇北币</view>
			</view>
			<view class="item" @tap="toDetail('/pages/myChip/index')">
				<view class="number">{{userInfo.redpackCount || 0}}</view>
				<view class="text">红包</view>
			</view>
			<template v-if="config.is_show_invite_total">
				<view class="item" @tap="toDetail('/pages/myInvitees/index')">
					<view class="number">{{userInfo.inviteesCount || 0}}<span class="small-font">人</span></view>
					<view class="text">邀请记录</view>
				</view>
			</template>
		</view>
		<view class="order-c">
			<!-- <view class="top">
				<view class="title">我的订单</view>
				<view class="all-btn" @tap="toDetail('/pages/orderList/index?status=all')">
					全部
					<text class="icon new-iconfont icon-arrow-right"></text>
				</view>
			</view> -->
			<view class="body">
				<view class="item" @tap="toDetail('/pages/myBox/index?status=pending')" hover-class="hover">
					<!-- 	<view v-if="orderStat.pending_package_sku" class="dot">
						{{orderStat.pending_package_sku}}
					</view> -->
					<!-- <image mode="widthFix" class="icon" :src="config.depot_icon || '/static/center/order-pending.png'"> -->
					<!-- </image> -->
					<view class="boxCabinet">
						<view class="title">盒柜</view>
						<view class="look-shop">
							查看新商品
						</view>
					</view>
					<image class="boxCabinet-icon" src="../../static/boxCabineticon.png" mode=""></image>
				</view>
				<view class="line">
					|
				</view>
				<view class="item" @tap="toDetail('/pages/orderList/index?status=pay_pending')" hover-class="hover">
					<!-- <view v-if="orderStat.pay_pending" class="dot">
						{{orderStat.pay_pending}}
					</view> -->
					<!-- <image mode="widthFix" class="icon"
						:src="'/static/center/order-return-sale.png'"></image> -->
					<view class="boxCabinet">
						<view class="title">订单</view>
						<view class="look-shop">
							查看消费记录
						</view>
					</view>
					<image class="shop-icon" src="../../static/shopicon.png" mode=""></image>
				</view>
				<!-- <view class="item" @tap="toDetail('/pages/orderList/index?status=deliver_pending')" hover-class="hover">
					<view v-if="orderStat.deliver_pending" class="dot">
						{{orderStat.deliver_pending}}
					</view>
					<image mode="widthFix" class="icon"
						:src="config.deliver_pending_icon || '/static/center/order-deliver-pending.png'"></image>
					<text>待发货</text>
				</view>
				<view class="item" @tap="toDetail('/pages/orderList/index?status=delivered')" hover-class="hover">
					<view v-if="orderStat.delivered" class="dot">
						{{orderStat.delivered}}
					</view>
					<image mode="widthFix" class="icon"
						:src="config.delivered_icon || '/static/center/order-delivered.png'"></image>
					<text>待收货</text>
				</view> -->
			</view>
		</view>

		<!-- <Banner class="center-banner" v-if="config.banner && config.banner.length" :list="config.banner"
			iStyle="height: 160rpx;" imageStyle="border-radius: 50rpx 50rpx 0rpx 0rpx; ">
		</Banner> -->
		<view class="action-list action-list-1">
			<!-- <view class="item" v-for="(item, index) in items" @tap="toLink(item.link)" hover-class="hover">
				<view class="text">{{item.text}}</view>
			
			</view> -->
			<view class="item" v-for="(item, index) in itemList" @tap="toLink(item.link)" hover-class="hover"
				@longpress="disableContextMenu(index)" :class="longIndex == index ? 'active' : ''">
				<view class="left-arr">
					<view class="left-icon">
						<image :src="item.image"></image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>

				<text class="icon new-iconfont icon-arrow-right"></text>
			</view>
		</view>
		<view style="height:130rpx"></view>
		<!-- #ifndef MP-ALIPAY -->
		<FloatBtn v-if="floatBtn.is_show" :link="floatBtn.link" :isAnimated="floatBtn.is_animate" :src="floatBtn.image">
		</FloatBtn>
		<!-- #endif -->
		<view class="copyright-c" v-if="config.copyright">{{config.copyright}}</view>
		<!-- 邀请二维码弹框 -->
		<Dialog v-if="getDialog" :user="userInfo" :dialogVisible="getDialog" @close="handleCloseDialog" />
		<!-- <view class="version-c" @tap="toDetail('/pages/index/newIndex')">版本: v{{version}}</view> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		BASE_URL
	} from "@/config/index.js";
	import Dialog from "./components/dialog.vue"
	export default {
		name: "center",
		components: {
			Dialog
		},
		data() {
			return {
				// code: '',
				version: '3.9.14',
				init: false,
				orderStat: {},
				imageBase64: "",
				itemList: [{
						text: '购物车',
						image: "../../static/shoppingCart.png",
						link: {
							path: "/pages/cart/index",
							type: "xpath"
						}
					},
					{
						text: '收货地址',
						link: {
							path: "/pages/myAddress/index",
							type: "xpath"
						},
						image: "../../static/harvestAddress.png",
					},
					// {
					// 	text: '规则与协议',
					// 	link: {
					// 		path: "/pages/rule/index",
					// 		type: "xpath"
					// 	},
					// 	image: "../../static/redemptionCode.png",
					// },
					{
						text: '邀请码',
						link: "1",
						image: "../../static/invitationCode.png",
					},
					{
						text: '兑换码',
						link: '2',
						image: "../../static/redemptionCode.png",
					},
					{
						text: '中奖记录设置',
						link: '3',
						image: "https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/21651716274232731.png",
					}

					// {
					// 	text: '任务区',
					// 	link: {
					// 		path: "/pages/center/assignment",
					// 		type: "xpath"
					// 	},
					// 	image: "../../static/redemptionCode.png",
					// },
					// {
					// 	text: '每日签到',
					// 	link: {
					// 		path: "/pages/sign/index",
					// 		type: "xpath"
					// 	},
					// 	image: "../../static/redemptionCode.png",
					// },
				],
				getDialog: false,
				isUsersAnonymity: false,
				//商城开启状态
				isShowShop: 0,
				//玩家市场开启状态
				isShowGame: 0,
				longIndex: -1, // 是否处于长按状态
			}
		},
		computed: {
			...mapGetters(["deviceInfo", "userInfo", "token", "personalSettings"]),
			isLogin() {
				return this.token ? true : false
			},
			userName() {
				return this.token ? this.userInfo.name : "点击登录"
			},
			avatar() {
				return this.token ? this.userInfo.headimg : "/static/toux.png"
			},
			config() {
				return this.$store.getters.setting.user_center
			},
			items() {
				console.log(this.config)
				return this.config && this.config.items || []
			},
			isAnimated() {
				return true
			},
			floatBtn() {
				return {
					is_show: this.config.is_show_float_btn,
					link: this.config.float_btn_link,
					image: this.config.float_btn_image,
					is_animate: this.config.float_btn_is_animate
				}
			},
			containerStyleStr() {
				let bg = this.config.top_bg || 'https://cdn2.hquesoft.com/cwa/center/bg.png'
				return `background: url(${bg}); background-size: 100% auto; background-repeat: no-repeat;`
			}
		},
		onLoad() {
			// #ifdef H5
			uni.setNavigationBarTitle({
				title: '个人中心'
			})
			// #endif
		},
		onShow() {
			this.$store.dispatch("getUserInfo")
			// if (this.isLogin) {
			// 	this.$store.dispatch("getUserInfo").then(res => {
			// 		this.$http('/order-stat').then(res => {
			// 			this.orderStat = res.data.info
			// 		})
			// 	})
			// };
			this.selectUsersAnonymity();
			this.getShop();
		},
		methods: {
			//首页查询商城是否关闭
			getShop() {
				this.$http('/function_switch/all').then(res => {
					this.isShowShop = res.data[1].type
					this.isShowGame = res.data[0].type
					if (this.isShowShop == 0) {
						uni.showTabBar()
						uni.setTabBarItem({
							index: 1,
							visible: false
						})
					}
					if (this.isShowGame == 0) {
						uni.showTabBar()
						uni.setTabBarItem({
							index: 2,
							visible: false
						})
					}
				})
			},
			// 联系客服方法
			openContact() {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc4ef48258ae5ce0a4'
			},
			// 查询用户中奖记录是否匿名
			selectUsersAnonymity() {
				this.$http("/user/selectUsersAnonymity", "post", {
					id: this.userInfo.id
				}).then(res => {
					if (res.code == 200) {
						this.isUsersAnonymity = true
					} else {
						this.isUsersAnonymity = false
					}
				})
			},
			// 调用邀请的二维码接口
			toLink(link) {
				if (link == 1) {
					this.getDialog = true
				} else if (link == 2) {
					uni.showModal({
						title: '请输入兑换码',
						editable: true,
						success: (res) => {
							if (res.confirm) {
								if (!res.content) {
									return false
								}
								this.$http('/user/exchange', 'get', {
									code: res.content
								}).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '兑换成功~',
											icon: 'none'
										})
										this.$store.dispatch("getUserInfo")
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none'
										})
									}
								})
							}
						}
					})
				} else if (link == 3) {
					let that = this
					if (this.isUsersAnonymity) {
						uni.showModal({
							title: '中奖记录设置',
							content: '您在系统中的中奖记录将使用用户昵称进行展示',
							success: function(res) {
								if (res.confirm) {
									that.$http("/user/isUsersAnonymity", "post", {
										id: that.userInfo.id,
										status: 0
									}).then(res => {
										if (res.code == 200) {
											uni.showToast({
												title: res.message,
												icon: 'none'
											});
											that.selectUsersAnonymity();
										} else {
											uni.showToast({
												title: res.message,
												icon: 'none'
											})
										}
									})
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: '中奖记录设置',
							content: '您在系统中的中奖记录将匿名展示使用随机昵称进行展示',
							success: function(res) {
								if (res.confirm) {
									that.$http("/user/isUsersAnonymity", "post", {
										id: that.userInfo.id,
										status: 1
									}).then(res => {
										if (res.code == 200) {
											uni.showToast({
												title: res.message,
												icon: 'none'
											})
											that.selectUsersAnonymity()
										} else {
											uni.showToast({
												title: res.message,
												icon: 'none'
											})
										}
									})
								} else if (res.cancel) {
									console.log('取消');
								}
							}
						});
					}

				} else {
					uni.navigateTo({
						url: link.path
					})
				}
			},
			// 邀请弹框关闭
			handleCloseDialog() {
				this.getDialog = false;
			},
			toProfilePage() {
				uni.navigateTo({
					url: '/pages/myProfile/index'
				})
			},
			toDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			toDayTask() {
				this.isAnimated = false
				uni.navigateTo({
					url: '/pages/dayTask/index'
				})
			},
			toBuyVip() {
				uni.navigateTo({
					url: '/pages/buyVip/index'
				})
			},
			disableContextMenu(index) {
				// 阻止默认的上下文菜单显示
				// e.preventDefault();
				// console.log(index)
				this.longIndex = index;
				setTimeout(() =>{
					this.longIndex = -1
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	.version-c {
		text-align: center;
		font-size: 90%;
		background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		height: 80rpx;
		font-weight: 100;
	}

	.copyright-c {
		text-align: center;
		font-size: 90%;
		color: #999;
		height: 50rpx;
	}

	page {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
	}

	.small-font {
		font-size: 24rpx;
	}

	.header {
		display: flex;
		height: 500rpx;
		padding: 70rpx 20rpx;
		width: 93%;
		margin: 50rpx auto 0 auto;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: url("../../static/bgpeople.png") no-repeat center / cover;
		height: 350rpx;

		.headimg {
			width: 140rpx;
			margin: 0rpx 30rpx 0 0;
			height: 140rpx;
			border-radius: 50%;
			// border: 10rpx solid #484746;
			box-sizing: border-box;
		}

		.middle {
			display: flex;
			color: #fff;
			font-weight: 100;
			// height: 170rpx;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 25rpx 0;
			margin-top: 20rpx;

			.name,
			.is-login {
				font-size: 39rpx;
				font-weight: 900;
			}
		}

		.right {
			// color: #6c2a09;
			// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			color: #fff;
			background: rgb(184, 155, 255);
			font-size: 26rpx;
			padding: 10rpx;
			border-radius: 50rpx;
			width: 70rpx;
			font-weight: 100;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			width: 130rpx;
			height: 50rpx;
			margin-top: 30rpx;
			margin-right: 0;

			&::after {
				display: none;
			}

		}

	}

	/* #ifdef MP-ALIPAY */
	.header {
		margin-top: 50rpx;

		.headimg {
			width: 120rpx;
			height: 120rpx;
			flex: 0 0 120rpx;
		}
	}

	/* #endif */

	.status-bar {
		width: 87%;
		margin: -100rpx auto 0;
		height: 200rpx;
		background: url("../../static/peopleBar.png") no-repeat center;
		// 毛玻璃
		backdrop-filter: blur(15px);
		border-radius: 20rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 30rpx;
		justify-content: space-between;
		align-items: center;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;

			.number {
				font-weight: 900;
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}

			.text {
				font-weight: 100;
				font-size: 30rpx;
			}
		}
		
	}

	.order-c {
		width: 90%;
		// height: 300rpx;
		// background: rgb(26, 23, 36);
		border-radius: 20rpx;
		margin: 0 auto;
		// box-shadow: 0px 0px 8rpx 0px rgb(217, 163, 123);
		margin-top: 30rpx;

		.top {
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			align-items: center;
			// border-bottom: 1px solid #e9e9e9;

			.title {
				font-weight: bold;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 33rpx;
				flex-grow: 1;
			}

			.all-btn {
				font-size: 28rpx;
				font-weight: 500;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.body {
			display: flex;
			align-items: center;
			width: 87%;
			justify-content: space-between;
			height: 180rpx;
			background: rgb(31, 29, 41);
			margin: 0 auto;
			padding: 0 30rpx;
			border-radius: 20rpx;

			.item {
				height: 80rpx;
				width: 240rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;

				.boxCabinet {
					height: 87rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-weight: 100;
						font-size: 40rpx;
					}

					.look-shop {
						font-size: 23rpx;
						color: rgb(98, 75, 68);
					}
				}

				.boxCabinet-icon,
				.shop-icon {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.line {
				color: #fff;
				margin: 0 30rpx;
				font-size: 40rpx;
			}
		}
	}

	.center-banner {
		width: 95% !important;
		height: 200rpx !important;
		display: block;
		margin: 30rpx auto -60rpx;
	}

	.action-list {
		width: 80%;
		margin: 30rpx auto 20rpx auto;
		// border: 3rpx solid #5d4748;
		background: rgb(31, 29, 41);
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		// box-shadow: 0px 14rpx 30rpx 0px rgba(243, 238, 220, 0.16);

		position: relative;
		/* #ifdef APP-PLUS */
		top: -20rpx;
		/* #endif */


		.item {
			height: 80rpx;
			border-bottom: 1rpx solid #F3F3F3;
			display: flex;
			margin: 10rpx 0;
			justify-content: space-between;
			align-items: center;

			.left-arr {
				height: 80rpx;
				display: flex;
				align-items: center;

				.left-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.text {
					font-size: 28rpx;
					color: #f8f8f8;
				}
			}

			.icon-arrow-right {
				display: flex;
				align-items: center;
				font-size: 42rpx;
				display: block;
				color: #aaa;
				line-height: 42rpx;
				padding: 0rpx;
			}
		}

		.item:last-child {
			border: none;
		}
		.active .left-arr .text{
			color: #222;
		}
	}

	.float-btn {
		width: 160rpx;
		height: 160rpx;
		position: fixed;
		right: 10rpx;
		bottom: 160rpx;
	}

	@keyframes yaoyiyao {
		0% {
			transform: scale(1) rotate(-4deg);
		}

		25% {
			transform: rotate(0deg);
		}

		50% {
			transform: scale(1.1) rotate(4deg);
		}

		75% {
			transform: rotate(0deg);
		}

		100% {
			transform: scale(1) rotate(-4deg);
		}
	}
</style>